<template>
    <div>
        <!--1.用户信息列表-->
        <el-container>
            <!--1-1.页面头部信息-->
            <el-header class="header-all">
                <!--1-1-1.查询区域-->
                <div style="display: inline;">
                    <el-input placeholder="请输入要查询的用户姓名" prefix-icon="el-icon-search" v-model="funame" class="input-name" />
                    <el-button type="primary" class="but-select" @click="select">搜索</el-button>
                </div>
                <!--1-1-2.功能区域-->
                <div class="div-header-but">
                    <el-button type="primary" class="but-select" @click="add">新增</el-button>
                </div>

            </el-header>

            <!--1-2.列表区域-->
            <el-main>
                <el-table :data="userList">
                    <el-table-column prop="code" width="160px" label="人员编号"></el-table-column>
                    <el-table-column prop="unam" width="160px" label="姓名"></el-table-column>
                    <el-table-column prop="sex" width="130px" label="性别"></el-table-column>
                    <el-table-column prop="age" width="130px" label="年龄"></el-table-column>
                    <el-table-column prop="shenfen" width="210px" label="身份证号"></el-table-column>
                    <el-table-column prop="ruTime" width="160px" label="入职日期"></el-table-column>
                    <el-table-column prop="cTime" width="160px" label="创建日期"></el-table-column>
                    <el-table-column width="200px" label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="update">编辑</el-button>
                            <el-button type="danger" plain @click="del">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

        </el-container>

        <!--2.模板表单-->
        <el-form :model="user" class="form-dialog">
            <div class="form-div">
                <el-dialog :visible.sync="dialogVisible" class="form-div-dialog">
                    <el-row>
                        <el>
                            <div style="display: inline;">
                                <el-form-item label="编号">
                                    <el-input v-model="user.code" type="text" class="form-input" style="background: dimgrey;" readonly />
                                </el-form-item>
                            </div>
                        </el>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="display: inline;">
                                <el-form-item label="姓名">
                                    <el-input v-model="user.uname" type="text" class="form-input" placeholder="请输入姓名" />
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="display: inline;">
                                <el-form-item label="性别">
                                    <!--<el-input type="text" class="form-input" placeholder="请输入性别" />-->
                                    <el-dropdown slot="dropdown">
                                        <el-dropdown-item value="0">男</el-dropdown-item>
                                        <el-dropdown-item value="1">女</el-dropdown-item>
                                    </el-dropdown>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="display: inline;">
                                <el-form-item label="身份证号">
                                    <el-input v-model="user.shenfen" type="text" class="form-input" placeholder="请输入身份证号" />
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="display: inline;">
                                <el-form-item label="年龄">
                                    <el-input v-model="user.age" type="text" class="form-input" placeholder="请输入年龄" />
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="display: inline;">
                                <el-form-item label="入校日期">
                                    <el-date-picker v-model="user.ruTime" type="date" placeholder="请选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>


                    <span slot="footer">
                        <el-button type="info" plain @click="cancle">取消</el-button>
                        <el-button type="primary" plain @click="save">保存</el-button>
                    </span>

                </el-dialog>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'empList',
    data() {
        return {
            funame: '',
            userList: [
                { "code": "T20230421", "unam": "张三", "sex": "男", "age": "23", "shenfen": "1513135121531321231", "ruTime": "20220101", "cTime": "20211212" },
                { "code": "T20230422", "unam": "李四", "sex": "女", "age": "23", "shenfen": "1513135121531321232", "ruTime": "20220102", "cTime": "20211213" }
            ],
            dialogVisible: false,
            user:{
                "code":"",
                "uname":"",
                "sex":"",
                "age":"",
                "shenfen":"",
                "ruTime":"",
                "cTime":""
            }
        }
    },
    methods: {
        select() {
            console.log("获取要查询的信息")
        },
        add() {
            console.log("已经进入填写人员信息方法")
            //打开弹窗
            this.dialogVisible = true
        },
        update(){
            console.log("已经进入修改人员信息方法")
            //打开弹窗
            this.dialogVisible = true
        },
        del(){
            console.log("可以删除当前选中的信息")
        },
        cancle(){
            console.log("取消对数据的保存，并且关闭弹窗")
            //关闭弹窗
            this.dialogVisible = false
        },
        save(){
            console.log("保存弹窗当中的内容，保存成功后自动关闭弹窗")
            //关闭弹窗
            this.dialogVisible = false
        }
    }
}
</script>
<!-- 1-1-1开始对应每个空间及页面的样式进行绘制-->
<style>
.input-name {
    width: 300px;
    margin: 0px;
    padding: 0px;
    size: mini;
}

.but-select {
    margin-left: 5px;
    size: mini;

}

.div-header-but {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;
}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-dialog {
    margin: 0px;
    padding: 0px;

}

.form-div {
    text-align: left;
}

.form-div-dialog {
    padding: 0px;
    width: 85%;
}

.form-input {
    width: 253px;
    height: 20px;
    size: mini;
}
</style>